<template>
    <view class="signInPageStyle">
        <view class="myJfStyle item-center">
            <text style="margin-right: 20rpx; font-size: 32rpx;">我的积分</text>
            <text style="font-size: 24rpx;">本月已得 {{pageData.receivedScore||0}}/{{ pageData.unreceivedScore||0 }}</text>
        </view>
        <view class="pointsStyle flex item-center">
            <text style="font-size: 48rpx;font-weight: 500;margin-right: 20rpx;">{{ pageData.score||0 }}</text>
            <view class="center" style="height: 26rpx;" @click="onJump()">
                <text style="font-size: 24rpx;" >查看</text>
                <image src="./static/whiteArrow.svg"
                style="width: 16rpx;height: 24rpx;margin-left: 10rpx;" />
            </view>
            
        </view>
        <view class="dayScoreStyle">
            <view class="flex" >
                <text style="font-size: 40rpx;font-weight: 500;margin-right: 20rpx;">每日签到</text>
                <text style="font-size: 24rpx;color: #999;" class="center">本月已签到2天</text>
            </view>
            <view class="flex between" style="margin-top: 32rpx;">
                <view class="signInItem"  v-for="(item,index) in Array.from({length: 7},(item,index)=>index)">
                    <image src="./static/signin/goldCoinIcon.svg" style="width: 60rpx;height: 60rpx;margin-bottom: 10rpx;"/>
                    <text v-if="item==0">今天</text>
                    <text v-else-if="item==1">明天</text>
                    <text v-else>第{{index+1 }}天</text>
                </view>
            </view>
        </view>
        <view class="calendatStyle">
            <renCalendar
                ref='ren' 
                :markDays='markDays' 
                :headerBar='true' 
                :collapsible="false"
                @onDayClick='onDayClick'
                @changeMonth='changeMonth'/>
        </view>
        <image src="./static/signin/goldCoins.png" class="goldStyle"/>
        <view :class="pageData.sign?'bottomBtn disabledBtn':'bottomBtn'"  @click="onSignIn">
            <text>{{pageData.sign?'已签到':'签到'  }}</text>
        </view>
        <BotMenu :isPopup="isPopup" @close=" isPopup = false" title="签到" :showCancel="true">
            <view class="center flex-column" style="padding:120rpx 30rpx;">
                <image src="./static/signin/signinPopup.svg" style="width: 100rpx;height: 100rpx;margin-bottom: 20rpx;"/>
                <text>签到成功</text>
            </view>
        </BotMenu>
    </view>
</template>

<script>
import renCalendar from './components/ren-calendar/ren-calendar.vue';
import {accumulateSign, getSignInHome, getUserVipInfo, signIn} from "./services/signInService"
export default {
    name: 'signInPage',
    data() {
        return {
            // 安全区域
            safeAreaInsets: { bottom: 0 },
            curDate:'',
            markDays:[],
            // 当前页面数据
            pageData: {
                sign:true
            },
            isPopup:false,
        };
    },
 
    methods: {
        // 切换月份
        changeMonth(y,m){
            // console.log(y,m,"==changeMonth")
            accumulateSign({date:y+"-"+m}).then(res=>{
                this.markDays=res.map(item=>this.onformTime(item))
            })
        },
        onDayClick(data){
            console.log(data.data,"=-73")
            // accumulateSign({date:data.date}).then(res=>{
                
            // })
            this.curDate = data.date;
        },
        onJump(){
            // console.log("11169")
            uni.navigateTo({
                 url: `./showPointsPage`
            })
        },
        // 签到
        onSignIn(){
            if(this.pageData.sign){
                return
            }
            signIn().then(res=>{
                this.isPopup=true;
                this.onInitData();
                this.onUpdataGlobalInfo()
                
            })
        },
        onInitData(){
            getSignInHome().then(res=>{
                // console.log(res,"---res")
                this.pageData=res
                this.markDays=res.accumulateSign.map(item=>this.onformTime(item))
            })
        },
        // 更新全局信息
        onUpdataGlobalInfo(){
            getUserVipInfo().then(data => {
                uni.setStorageSync('loginData',{...uni.getStorageSync('loginData'),...data} || {});
            })  
        },
        // 格式化时间
        onformTime(time){
            return time?time.split(" ")[0]:""
        }
    },
    mounted() {
        // Add your mounted logic here
    },
    onReady() {
            let today = this.$refs.ren.getToday().date;
            // console.log(today,"---102")
            this.curDate = today;
            // this.markDays.push("2025-01-13");
            // this.markDays=["2025-01-13","2025-01-22"];
    },
    beforeMount() {
        uni.getSystemInfo({
            success: (res) => {
                console.log(res.safeAreaInsets)
                // this.windowWidth = res.windowWidth
                // this.windowHeight = res.windowHeight
                this.safeAreaInsets = res.safeAreaInsets
            }
        })
    },
    onShow() {
        this.onInitData()
    },
    computed: {
        
    },
    components: {
        renCalendar
    }
};
</script>

<style scoped lang="scss">
.signInPageStyle {
    background: linear-gradient(180.55deg, #37B874 0.48%, rgba(55, 184, 116, 0.71) 44%, rgba(55, 184, 116, 0) 87.53%);
    box-sizing: border-box;
    height: 100vh;
    padding: 40rpx;
    .myJfStyle{
        display: flex;
        color: #fff;
    }
    .pointsStyle{
        color: #fff;
        margin-top: 34rpx;
        position: relative;
        z-index:10;
        
    }
    .dayScoreStyle{
        margin-top: 128rpx;
        width: 100%;
        /* height: 260rpx; */
        background-color: #fff;
        border-radius: 24rpx;
        position: relative;
        z-index: 2;
        padding: 40rpx 36rpx;
        box-sizing: border-box;
        .signInItem{
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
            font-size: 24rpx;
        }
    }
    .calendatStyle{
        margin-top: 20rpx;
        background-color: #fff;
        border-radius: 24rpx;
        height: calc(100vh - 639rpx);
        padding: 10rpx;
    }
    .goldStyle{
        position: absolute;
        top: 50rpx;
        right: -30rpx;
        width: 780rpx;
        height: 512rpx;
        /* height: 572rpx; */
        z-index: 1;
    }
    .bottomBtn {
        width: calc(100% - 92rpx);
        /* margin: 40rpx 0 0 30rpx; */
        left: 46rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 90rpx;
        box-shadow: 0px 1px 8px 0px #00000014;
        border-radius: 24rpx;
        /* bottom: 160rpx; */
        background-color: #37B874;
        color: #fff;
        position: absolute;
        bottom: 40rpx;
    }
    .disabledBtn{
        border: 2rpx solid #F0F0F0;
        color: rgba(153, 153, 153, 0.6);
        background-color: #f8f8f8;
        
    }
}   
</style>